<template>
  <div class="key">
    <div class="left">
      <ul>
        <!-- btn1 -->
        <li @click="clear(item)" @mouseenter.stop="mouseenter($event)" @mouseleave.stop="mouseleave($event)" v-for="item in btn1" :key="item">{{ item }}</li>
      </ul>

      <ul>
        <!-- btn2 -->
        <li @click="math(item)" @mouseenter.stop="mouseenter($event)" @mouseleave.stop="mouseleave($event)" v-for="item in btn2" :key="item">{{ item }}</li>
      </ul>

      <ul>
        <!-- num1 -->
        <li @click="isNum(item)" @mouseenter.stop="mouseenter($event)" @mouseleave.stop="mouseleave($event)" v-for="item in num1" :key="item">{{ item }}</li>
      </ul>

      <ul>
        <!-- num2 -->
        <li @click="isNum(item)" @mouseenter.stop="mouseenter($event)" @mouseleave.stop="mouseleave($event)" v-for="item in num2" :key="item">{{ item }}</li>
      </ul>

      <ul>
        <!-- num3 -->
        <li @click="isNum(item)" @mouseenter.stop="mouseenter($event)" @mouseleave.stop="mouseleave($event)" v-for="item in num3" :key="item">{{ item }}</li>
      </ul>

      <ul>
        <!-- num4 -->
        <li @click="isNum(item)" @mouseenter.stop="mouseenter($event)" @mouseleave.stop="mouseleave($event)" v-for="item in num4" :key="item">{{ item }}</li>
      </ul>
    </div>
    <div class="right">
      <ul>
        <!-- right -->
        <li @click="calculate(item)" @mouseenter.stop="mouseenter($event)" @mouseleave.stop="mouseleave($event)" v-for="item in right" :key="item"><i :class="item === ''?'el-icon-circle-close':''">{{item}}</i></li>
      </ul>
    </div>
  </div>
</template>

<script>

import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      btn1: ['%', 'CE', 'C'],
      btn2: ['1/x', '**', '//'],
      num1: [7, 8, 9],
      num2: [4, 5, 6],
      num3: [1, 2, 3],
      num4: ['+/-', 0, '.'],
      right: ['', '/', 'x', '-', '+', '='],
      initialColor: '', // 储存颜色
      isPositive: true, // 判断数字的正负
      isFloat: false // 判断是否为小数
    }
  },

  computed: {
    ...mapState([])
  },

  methods: {
    ...mapMutations(['heBing', 'clearShowNum', 'clearAll', 'changePositive', 'delLast', 'toCalculate', 'toMath']),

    mouseenter (event) {
      // 获取元素原本的背景样式
      this.initialColor = window.getComputedStyle(event.target, null).backgroundColor
      event.target.style.backgroundColor = 'blue'
    },

    mouseleave (event) {
      // 鼠标移除时还原按键的颜色
      event.target.style.backgroundColor = this.initialColor
    },

    isNum (item) {
      if (item === '.' && !this.isFloat && item !== '+/-') {
        this.heBing(item)
        this.isFloat = true
      } else if (item !== '.' && item !== '+/-') {
        this.heBing(item)
      } else if (item === '+/-') {
        // if (!this.isPositive) {
        // 改变当前的正负数
        this.changePositive(this.isPositive)
        // } else {
        // this.changePositive(this.isPositive)
        // }
        // this.isPositive = !this.isPositive
      }
    },

    clear (item) {
      if (item !== '%') this.isFloat = false
      if (item === 'CE') return this.clearShowNum()
      if (item === 'C') return this.clearAll()
    },

    calculate (item) {
      if (item === '') return this.delLast()
      this.isFloat = false
      this.toCalculate(item)
    },

    math (item) {
      this.toMath(item)
    }
  }
}
</script>

<style lang="less" scoped>
.key {
  display: flex;
  height: 651px;
}

.left {
  flex: 3;
  display: flex;
  flex-direction: column;
  ul {
    display: flex;
    flex: 1;
    text-align: center;
    line-height: 106px;

    &:nth-child(1) {
      li {
        border-top: 2px solid rgb(151, 149, 149);
        background-color: #ccc;
      }
    }

    &:nth-child(2) {
      li {
        background-color: #ccc;
      }
    }

    li {
      flex: 1;
      border-left: 2px solid rgb(151, 149, 149);
      border-bottom: 2px solid rgb(151, 149, 149);

      background-color: rgb(73, 73, 73);
    }
  }

}

.right {
  flex: 1;
  display: flex;

  ul {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 102px;

    li {
      flex: 1;
      border-left: 2px solid rgb(151, 149, 149);
      border-bottom: 2px solid rgb(151, 149, 149);
      border-right: 2px solid rgb(151, 149, 149);
      background-color: #ccc;

      &:nth-child(1) {
      border-top: 2px solid rgb(151, 149, 149);
      }

      &:last-child {
        background-color: rgb(151, 149, 149);
      }

    }

  }
}
</style>
